<template>
    <ul class="pagination">
        <li v-if="page === 1" class="disabled"><span>«</span></li>
        <li v-if="page !== 1"><span style="cursor: pointer" @click='skipPage(page-1)'>«</span></li>
        <template v-for="i in totalPage">
            <template v-if="i === (page-2)">
                <li><a @click='skipPage(i)' style="cursor: pointer" v-text="i"></a></li>
            </template>
            <template v-if="i === (page-1)">
                <li><a @click='skipPage(i)' style="cursor: pointer" v-text="i"></a></li>
            </template>
            <template v-if="i === page">
                <li id="current-page" class="active"><a style="cursor: pointer" @click='skipPage(i)' v-text="i"></a></li>
            </template>
            <template v-if="i === (page+1)">
                <li><a @click='skipPage(i)' style="cursor: pointer" v-text="i"></a></li>
            </template>
            <template v-if="i === (page+2)">
                <li><a @click='skipPage(i)' style="cursor: pointer" v-text="i"></a></li>
            </template>
        </template>
        <li v-if="page === totalPage" class="disabled"><span>»</span></li>
        <li v-if="page !== totalPage" style="cursor: pointer" @click='skipPage(page+1)' ><span>»</span></li>
    </ul>
</template>

<script>
    export default {
        name: 'the-pagination',
        props: {
            page: {
                type: Number,
                default: 1
            },
            searchContent: {
                type: String,
                default: ""
            },
            getData: {
                type: Function,
                default: null
            },
            totalPage: {
                type: Number,
                default: 1
            },
            searchType: {
                type: String,
                default: 'username'
            }
        },
        data: function () {
            return {
            }
        },
        mounted: function () {
            $("#current-page").addClass("active");
        },
        methods: {
            skipPage(page){
                let _this = this;
                let data = {
                    page: page,
                    searchContent: _this.searchContent,
                    searchType: _this.searchType
                };
                _this.getData(data);
            }
        }
    }
</script>